<template>
  <div class="order-list">
    <my-header title="我的订单列表" :back="goBack"></my-header>
    <my-tabbar :selected="tab" @change="handle">
      <my-tabbar-item text="全部" name="all">
      </my-tabbar-item>
      <span class="split">|</span>
      <my-tabbar-item text="待发货" name="send">
      </my-tabbar-item>
      <span class="split">|</span>
      <my-tabbar-item text="待付款" name="pay">
      </my-tabbar-item>
      <span class="split">|</span>
      <my-tabbar-item text="待收货" name="accept">
      </my-tabbar-item>
    </my-tabbar>
    <div class="list-container" :class="{'active-tab': tab === 'all'}" ref="all">
      <template v-if="list.all.length > 0">
        <div class="order-item" v-for="item in list.all">
          <div class="order-info-header">
            <span class="merchant-info">我的杂货店</span>
            <span class="fa fa-angle-right merchant-arrow"></span>
            <span class="active-msg">交易成功</span>
          </div>
          <div class="purchase-product" v-for="item in 4">
            <div class="purchase-img">
              <img src="../assets/images/timg.jpeg"  class="purchase-product-img" alt="">
            </div>
            <div class="purchase-msg">牛肉出售，好吃的张飞牛肉</div>
            <div class="purchase-money">
              <span class="product-price">￥12.00</span>
              <span class="purchase-numbers">x 10</span>
            </div>
          </div>
          <div class="order-summary">
            <span class="order-total">共1件商品</span>
            <span class="order-price">合计￥1.00</span>
            <span class="order-transport-fee">(含运费￥12.00)</span>
          </div>
          <div class="order-operation">
            <my-button>删除订单</my-button>
            <my-button @click="buyAgain">再次购买</my-button>
          </div>
        </div>
      </template>
      <div class="empty-msg" v-else>
        <div class="inner-wrapper" style="text-align: center">
          <span class="empty-icon"></span>
          <br>
          <span class="empty-msg-text">抱歉，您暂时还没有订单哦!</span>
        </div>
      </div>
    </div>
    <div class="list-container" :class="{'active-tab': tab === 'send'}" ref="send">
      <template v-if="list.send.length>0"></template>
      <div class="empty-msg" v-else>
        <div class="inner-wrapper" style="text-align: center">
          <span class="empty-icon"></span>
          <br>
          <span class="empty-msg-text">抱歉，您暂时还没有订单哦!</span>
        </div>
      </div>
    </div>
    <div class="list-container" :class="{'active-tab': tab === 'pay'}" ref="pay">
      <template v-if="list.pay.length>0"></template>
      <div class="empty-msg" v-else>
        <div class="inner-wrapper" style="text-align: center">
          <span class="empty-icon"></span>
          <br>
          <span class="empty-msg-text">抱歉，您暂时还没有订单哦!</span>
        </div>
      </div>
    </div>
    <div class="list-container" :class="{'active-tab': tab === 'accept'}" ref="accept">
      <template v-if="list.accept.length>0">

      </template>
      <div class="empty-msg" v-else>
        <div class="inner-wrapper" style="text-align: center">
          <span class="empty-icon"></span>
          <br>
          <span class="empty-msg-text">抱歉，您暂时还没有订单哦!</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import orderApi from '@/api/order'
  import MyHeader from '@/components/Header'
  import MyTabbar from '@/components/Tabbar'
  import MyTabbarItem from '@/components/Tabbar/TabbarItem'
  import MyButton from '@/components/MyButton'
  export default {
    name: 'OrderList',
    components: {
      MyHeader,
      MyTabbar,
      MyTabbarItem,
      MyButton
    },
    data: () => ({
      tab: 'all',
      list: {
        all: [],
        send: [],
        pay: [],
        accept: []
      }
    }),
    mounted () {
      var memberId = 123
      this.$Central.$emit('loading', true)
      orderApi.getOrderList({
        memberId
      }).then(response => {
        this.$Central.$emit('loading', false)
        if (response.data.code == 0) {
          console.log(response.data.data);
        } else {
          window.alert('获取订单信息失败，错误信息:'+response.data.message)
        }
      }, err => {
        this.$Central.$emit('loading', false)
        window.alert('系统错误，获取订单信息失败!')
      })
    },
    methods: {
      buyAgain ($event) {
        alert('OK')
        console.log($event)
      },
      goBack () {
        window.history.go(-1);
      },
      handle (data) {
        this.tab = data
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/css/variable";
  @import "../assets/css/px2rem";
  .order-list{
    padding-top: px2rem($header-height);
    background: #eaeaea;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  .split{
    font-size: 0.6rem;
    display: inline-block;
    height: px2rem($tabbar-height);
    line-height: px2rem($tabbar-height);
    color: #d5d5d5;
  }

  .list-container{
    width: 100%;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    display: none;
    &.active-tab {
      display: block !important;
    }
  }

  .empty-msg{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaeaea;
    width:100%;
    height: 100%;
    .empty-icon{
      display: inline-block;
      margin-top: - px2rem(150px);
      width:px2rem(300px);
      height: px2rem(300px);
      background-image: url("../assets/images/empty-order.png");
      background-size: cover;
    }
    .empty-msg-text{
      display: inline-block;
      font-size: 0.8rem;
      color: $fontColor;
    }
  }

  .inner-wrapper{
    float: left;
    margin-top: - px2rem(150px);
    width: 100%;
    height: auto;
    display: block;
  }

  .order-item{
    float: left;
    width: 100%;
    box-sizing: border-box;
    min-height: px2rem(300px);
    background: white;
    margin-top: px2rem(30px);
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    .order-info-header{
      width: 100%;
      height: px2rem(120px);
      float: left;
      display: block;
    }

    .merchant-info{
      line-height: px2rem(120px);
      color: $fontColor;
      margin:0 px2rem(40px);
      float: left;
      font-size: 0.6rem;
    }

    .merchant-arrow{
      float: left;
      line-height: px2rem(120px);
      color: #d5d5d5;
    }

    .active-msg {
      color: $theme-color;
      font-size: 0.55rem;
      float: right;
      margin-right: px2rem(40px);
      line-height:px2rem(120px);
    }

    .purchase-product{
      background: #f2f2f2;
      height: px2rem(240px);
      float: left;
      display: flex;
      width:100%;
      box-sizing: border-box;
      padding: px2rem(20px) px2rem(40px);
    }

    .purchase-img{
      flex:2;
      height: 100%;
    }

    .purchase-money{
      flex:2;
      height: 100%;
      text-align: center;
    }

    .purchase-product-img{
      width:100%;
      height: 100%;
    }

    .product-price{
      float: left;
      width:100%;
      font-size: 0.6rem;
      margin-top: px2rem(20px);
    }

    .purchase-msg{
      flex: 8;
      font-size: 0.55rem;
      height: 100%;
      line-height: 1.4em;
      box-sizing: border-box;
      padding: px2rem(10px) px2rem(20px);
    }

    .purchase-numbers{
      font-size: 0.5rem;
      color: $theme-color;
      float: right;
      display: inline-block;
      padding-right: px2rem(20px);
    }


    .order-summary{
      float: left;
      width:100%;
      display: block;
      height: px2rem(120px);
      background: white;
      border-bottom: 1px solid #ccc;
      text-align: right;
      box-sizing: border-box;
      padding:0 px2rem(40px);
    }
    .order-operation{
      float: left;
      width: 100%;
      height: px2rem(160px);
      background: white;
      text-align: right;
    }
    .order-total,
    .order-price,
    .order-transport-fee{
      color: $fontColor;
      display: inline-block;
      font-size: 0.6rem;
    }
    .order-price{
      margin: 0 px2rem(30px);
    }
  }
</style>
